<div class="infoBlock">
<div class="infoBlockHeading"><span class="t">Contents</span></div>
<div class="infoBlockContent">

<div class="infoBlockItem">
<form name="itemform" method="post">
<input type="hidden" name="action" value="update">
<input type="hidden" name="id" value="{$CONTENT.item.id}">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="100" align="right" valign="top"><label class="fb">Name</label>: </td>
    <td><a href="?op=detail&id={$CONTENT.item.id}" class="underline">{$CONTENT.item.name}</a></td>
    <td></td>
  </tr>
  <tr>
    <td align="right" valign="top"><label class="fb">Model</label>: </td>
    <td>{pp_text name="field_model" value=$CONTENT.item.model class="inputText3" require="true"}</td>
    <td></td>
  </tr>
  <tr class="hidden">
    <td align="right" valign="top"></td>
    <td><input type="submit" name="submitbtn" value="Submit"></td>
    <td></td>
  </tr>
</table>
</form>
</div>

<div class="infoBlockItem">
<form name="listform" method="post">
<input type="hidden" name="id" value="{$CONTENT.item.id}">
<table width="100%" border="0" cellspacing="0" cellpadding="5" class="listBox">
  <tr class="listBoxHeading">
    <td>{pp_inputcheckboxall name="sla" values=""}</td>
    <td>Content</td>
    <td>Type</td>
    <td>Status</td>
  </tr>
{section name=item loop=$CONTENT.content_items}
  <tr>
    <td>{pp_inputcheckbox value=$CONTENT.content_items[item].id}</td>
    <td><a href="{$CONTEXT.ADMINURL}content/?op=detail&id={$CONTENT.content_items[item].item.id}">{$CONTENT.content_items[item].item.name}</a></td>
    <td>{$CONTENT.content_items[item].type}</td>
    <td>{$CONTENT.content_items[item].status}</td>
  </tr>
{sectionelse}
  <tr>
    <td colspan="8"></td>
  </tr>
{/section}
  <tr>
    <td colspan="8"><div id="sfd" class="part">{pp_inputoptions name="field" options="[-----Actions-----=|Delete=delete|Status open=statusopen|Status close=statusclose]" onchange="PJS.list.doActionField('setfield-contents', this);"}</div></td>
  </tr>
</table>

{if $CONTENT.navigation.show == 1}
<div class="navigation">
<span class="count">{$CONTENT.navigation.count}</span>
<span class="links"><ul>{$CONTENT.navigation.links}</ul></span>
</div>
{/if}
</form>
</div>

<div class="infoBlockItem">
<form name="itemsearchform" method="post">
<input type="hidden" name="action" value="additem-content">
<input type="hidden" name="id" value="{$CONTENT.item.id}">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="100" align="right" valign="top"><label class="fb">Search</label>: </td>
    <td>{pp_inputtext name="keyword" value="" class="inputText3"} <a href="javascript:void(0);" onclick="_sls_search()" class="btn">Search</a></td>
    <td></td>
  </tr>
  <tr>
    <td align="right" valign="top"></td>
    <td><div id="sls" class="sls"></div></td>
    <td></td>
  </tr>
  <tr>
    <td align="right" valign="top"></td>
    <td><input type="submit" name="submitbtn" value="Submit"></td>
    <td></td>
  </tr>
</table>
</form>
</div>

{literal}
<style type="text/css">
.sls {
	background-color: #DADADA;
	border: 1px solid #999999;
	padding: 10px;
}
.sls .item {
	display: inline-block;
	padding: 10px;
	margin: 2px;
	cursor: pointer;
}
.sls .selected {
	background-color: #69F;
}
</style>
{/literal}

<script type="text/javascript" language="javascript" src="{$CONTEXT.URL}js/pjs.xh.js"></script>
{literal}
<script type="text/javascript" language="javascript">
var json_url=PJS.BASE_URL+"api/json";
function _sls_search(){
	var kw = document.itemsearchform.keyword.value;
	if(kw){
		var url=json_url;
		var params=[];
		params['action']='getcontents';
		params['keyword']=kw;
		pjs_xh.json(url,params,_sls_show);
	}
}
function _sls_show(ps){
	var c = "";
	for(var i=0; i<ps.length; i++){
		c += '<span class="item">'+ps[i].name+'<input type="checkbox" name="cb[]" value="'+ps[i].id+'" class="hidden"></span>';
	}
	$E("sls").innerHTML = c;
	//
	_sls_action();
}
function _sls_action(){
	var a = $E("sls").getElementsByTagName("SPAN");
	for(var i=0; i<a.length; i++){
		PJS.addEvent(a[i],"click",_sls_select);
	}
}
function _sls_select(evt){
	var o = evt.srcElement;
	if(o == null) o = evt.target;
	if(o.tagName == 'SPAN'){
		if(PJS.hasClass(o,["selected"])){
			PJS.removeClass(o,"selected");
			o.getElementsByTagName("INPUT")[0].checked=false;
		} else {
			PJS.addClass(o,"selected");
			o.getElementsByTagName("INPUT")[0].checked=true;
		}
	}
}
</script>
{/literal}

</div>
</div>